<template>
  <div id="app">
    <div>
      <h1>Axios Aajx custom Pagination</h1>
      <UserList></UserList>
      <hr />  
      </div>
    <div>
      <h1>Components</h1>
      <p>计数：<span><input type="number" v-model="counter" /></span>
          <span>{{counter}}</span>
      </p>
      <div>
        <CounterButton v-bind:counter="counter" @increment="updateCounter"></CounterButton>
        <CounterButton v-bind:counter="counter" @increment="updateCounter"></CounterButton>
      </div>
      <div>
        <CurrencyInput v-model="counter"></CurrencyInput>
      </div>
    </div>
    <hr>
    <div>
      <h2>Slot测试</h2>
      <ArticleBlock>
        <p>2017-03-20</p>
      </ArticleBlock>
    </div>
      
    
  </div>
</template>

<script>
/*
组件使用方法：
创建 UserList.vue 组件,注意组件的template只能有唯一的根节点元素
引用 在需要引用组件的组件中import组件，并在script的components中声明组件
使用 在需使用组件的template块中通过import的组件名使用组件
*/

import UserList from './components/UserList.vue'
import CounterButton from './components/CounterButton.vue'
import CurrencyInput from './components/CurrencyInput.vue'
import ArticleBlock from './components/ArticleBlock.vue'
import Config from './constant.js'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      counter: 0
    }
  },
  components: {
    UserList, CounterButton, CurrencyInput, ArticleBlock
  },
  methods: {
    updateCounter: function() {
      this.counter++;
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

</style>
